<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入VUE -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            1.创建Vue实例，且要传入一个配置对象
            2.root容器里面的代码符合html规范，混入一些vue语法
            3.root容器里的代码被称为Vue模板
            4.Vue实例和容器是一一对应的
            5.真实开发中只有一个vue实例，并且会配合着组件一起使用
            6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
            7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

            注意区分：js表达式 和 js语句
                1.表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方
                    (1)a
                    (2)a+b
                    (3)demo(1)
                    (4) x===y ?'z':'b'
                2.js代码（语句）
                    (1)if(){}
                    (2)for(){}
         -->
         <!-- 准备一个容器 -->
        <div id="root">
            <p>他的名字叫：-{{name}}-年龄：{{age}}-性别：{{sex}}</p>
        </div>
        <script>
            Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示
            new Vue({
                el:'#root',//el用于指定当前Vue实例那个容器服务，值通常为css选择器字符串
                data:{  //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                    name:"刘德华",
                    age:18,
                    sex:'男'
                }
            })
        </script>
    </body>
</html> 